<template>
    <div class="undreadmessage">
        <div class="top">
            <van-nav-bar
            title="未读评论"
            left-text="返回"
            left-arrow
            class="header"
            @click-left="$router.back(-1)"
            />
        </div>
      <div class="newsnum"><label style="font-weight: bold">{{newsnum}}&nbsp;</label>条未读</div>
      <!--    信息列表  -->
      <div class="items">
        <div class="item-list"> <!-- 循环此列表 -->
            <div class="item-top">
                <div class="item-top-logo"><img :src="Logourl" /></div>
                <div class="item-top-info">
                    <div class="item-name">{{itemname}}<span class="replay" @click="ClickReplay">回复</span></div>
                    <div class="item-info">{{iteminfo}}</div>
                </div>
            </div>
            <div class="item-desc">
                <div class="item-left-img"><img :src="ImgUrl" /></div>
                <div class="item-right-desc">
                    <div class="title">{{desctitle}}</div>
                    <div class="info">{{descinfo}}</div>
                </div>
            </div>
        </div>

        <div class="item-list"> <!-- 循环此列表 -->
            <div class="item-top">
                <div class="item-top-logo"><img :src="Logourl" /></div>
                <div class="item-top-info">
                    <div class="item-name">{{itemname}}<span class="replay" @click="ClickReplay">回复</span></div>
                    <div class="item-info">{{iteminfo}}</div>
                </div>
            </div>
            <div class="item-desc">
                <div class="item-left-img"><img :src="ImgUrl" /></div>
                <div class="item-right-desc">
                    <div class="title">{{desctitle}}</div>
                    <div class="info">{{descinfo}}</div>
                </div>
            </div>
        </div>

      </div>
    </div>
</template>

<script>
export default {
    name: 'UnreadIndex',
    data () {
        return  {
            newsnum: '1',
            Logourl: 'https://imgs.qunarzz.com/p/tts3/1808/bd/3935901d15a7c102.jpg_750x440_91925045.jpg',
            itemname: 'Meromy',
            iteminfo: '太干燥了吧，姐姐我这面膜怎么用啊，干燥死了~~~~',
            ImgUrl: 'https://imgs.qunarzz.com/p/tts3/1808/bd/3935901d15a7c102.jpg_750x440_91925045.jpg',
            desctitle: '护肤宝',
            descinfo: '太干燥了吧，姐姐我这面膜怎么用啊，干燥死了~太干燥了吧，姐姐我这面膜怎么用啊，干燥死了~'
        }
    },
    methods: {
        ClickReplay: function () {
            console.log('点击回复')
        }
    }
}

</script>

<style lang="stylus" scoped>
.top >>> .header
    background: #259e7b
    color: #ffffff
.top >>> .van-nav-bar__text, .top >>> .van-icon-arrow::before
    color: #ffffff !important 
.newsnum
        text-align: center
        color: #AEAEAE
        padding: .2rem
        margin: .5rem auto
        width: 5rem

.item-list
    padding: 1rem
.item-list >>> .item-top
        display: flex
        align-items: center
.item-top >>>  div
        padding: .2rem
.item-top >>>  div
    img
        width: 3rem
        height: 3rem
        border-radius: 50%
.item-top-info
  .item-name
        font-size: .8rem 
        color: #616161
        padding: 0 .2rem 0.5rem .2rem
    .replay
        position: absolute
        color: #CBCBCB
        border: .05rem solid #eee
        padding: 0 1rem
        border-radius: 2rem
        right: 1.5rem

.item-desc
        padding: .4rem
        background: #EEEEEE
.item-desc >>> .item-left-img
  img
        width: 5rem
        height: 5rem
    
.item-desc
        display: flex
        margin-top: .5rem
  .item-right-desc
        margin-left: .5rem
    .title
        font-size: .8rem
        color: #616161
        padding: 0 .2rem .5rem .2rem
        font-weight: bold
</style>